<template>
  <div>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
      size="800px"
      :wrapper-closable="false"
    >
      <!-- 头部 -->
      <div class="newly">
        <span @click="drawergb">X</span>
        <span>{{ text }}</span>
      </div>

      <!-- form表单 -->
      <el-form ref="form" :model="form" style="margin-left:40px" :rules="formRules">
        <!-- 用户 / 昵称 -->
        <el-row type="flex">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username" size="small" style="width:328px;margin-right:40px" />
          </el-form-item>
          <el-form-item label="昵称" prop="nickname">
            <el-input v-model="form.nickname" size="small" style="width:328px" />
          </el-form-item>
        </el-row>
        <!-- 密码 / 邮箱 -->
        <el-row type="flex">
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" size="small" style="width:328px;margin-right:40px" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" size="small" style="width:328px" />
          </el-form-item>
        </el-row>
        <!-- 手机号 / 启用状态 -->
        <el-row type="flex">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" size="small" style="width:328px;margin-right:40px" />
          </el-form-item>
          <el-form-item label="启用状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio :label="0">禁用</el-radio>
              <el-radio :label="1">启用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <!-- 角色 / 头像 -->
        <el-row type="flex">
          <el-form-item label="角色" prop="roles">
            <template>
              <el-select v-model="form.roles" :multiple="true" placeholder="请选择" size="small" style="width:328px;margin-right:40px">
                <el-option
                  v-for="item in roles"
                  :key="item.id"

                  :label="item.name"
                  :value="item.id"
                >
                  {{ item.name }}
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="头像" prop="avatar">
            <el-upload
              v-model="form.avatar"
              class="upload-demo"
              action="#"
              :file-list="fileList"
              list-type="picture"
              :http-request="httpRequest"
            >
              <el-button size="small" type="primary">点击上传</el-button>

            </el-upload>
          </el-form-item>
        </el-row>
        <!-- 确定 / 取消 -->
        <el-row type="flex" justify="end">
          <el-button
            type="primary"
            size="small"
            @click="onSubmit(form.id)"
          >提交</el-button>
          <el-button size="small" @click="drawergb">关闭</el-button>
        </el-row>
      </el-form>

    </el-drawer>
  </div>
</template>

<script>
import { getImgApi, getIedireApi, getPutApi, getrole } from '@/api/auth-user'
export default {
  name: 'UserHead',
  data() {
    return {
      fileList: [],
      drawer: false,
      text: '',
      form: {
        avatar: '', // 头像
        email: '', // 邮箱
        nickname: '', // 昵称
        password: '', // 密码
        phone: '', // 手机号
        roles: [], // 角色
        status: 1, // 状态
        username: ''// 用户名
      },
      roles: [],
      // 表单验证规则
      formRules: {
        avatar: [{ required: true, message: '请输入', trigger: 'blur' }],
        email: [{ required: true, message: '请输入', trigger: 'blur' }],
        nickname: [{ required: true, message: '请输入', trigger: 'blur' }],
        password: [{ required: true, message: '请输入', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入', trigger: 'blur' }],
        roles: [{ required: true, message: '请输入', trigger: 'blur' }],
        status: [{ required: true, message: '请输入', trigger: 'blur' }],
        username: [{ required: true, message: '请输入', trigger: 'blur' }]
      }

    }
  },
  created() {
    this.role()
  },
  methods: {
    // 获取所有的权限渲染下拉框
    async role() {
      const res = await getrole()
      console.log(res.data.data)
      this.roles = res.data.data
    },
    // 提交
    async  onSubmit(id) {
      console.log(id)
      await this.$refs.form.validate()
      if (id) {
        // 编辑
        await getPutApi({ ...this.form })
        // 调用父级方法，刷新页面
        this.$parent.getInquireApi()
        // 关闭弹框函数
        this.drawergb()
      } else {
        // 新增
        await getIedireApi(this.form)
        this.$message.success('添加成功')
        // 调用父级方法，刷新页面
        this.$parent.getInquireApi()
        // 关闭弹框函数
        this.drawergb()
      }
    },

    // 内置处理图片
    // 自定义上传
    async  httpRequest(data) {
      const fd = new FormData()
      fd.append('file', data.file)
      const res = await getImgApi(fd)
      this.form.avatar = res.data.data.url
    },
    // 关闭弹框
    drawergb() {
      this.$refs.form.clearValidate()
      this.drawer = false
      this.form = {
        avatar: '', // 头像
        email: '', // 邮箱
        nickname: '', // 昵称
        password: '', // 密码
        phone: '', // 手机号
        roles: [], // 角色
        status: 1, // 状态
        username: ''// 用户名
      }
      this.fileList = []
    }
  }

}
</script>

<style scoped lang="scss">
.newly{
  height: 50px;
  width: 100%;
  line-height: 50px;
  padding-left: 40px;
  border-bottom: 1px solid red;
  margin-bottom: 20px;
  span{
    margin-right: 20px;
    cursor:pointer;
  }
}
</style>
